<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>3.内容关</title>
	
	<style type="text/css">
		body {
			text-align: center;
		}
		.one{font-size:40px;margin: 10px 0}
		.content{
			height: 400px;
			padding-top: 100px;
			background: url('images/bg1.jpg') no-repeat;
			background-size: cover;
			color: white;
		}
		.content h1{
			font-weight: 100;
    		font-size: 72px;
		}
		.content h3{
			color: hsla(0,0%,100%,.7);
			font-size: 24px;
		}
		
		@media(max-width: 992px) and (min-width: 768px) {
		
			.content{
				height: 300px;}
			.content h1{		
	    		font-size: 48px;
			}
			.content h3{			
				font-size: 16px;
			}
		
		}	
		@media(max-width: 768px){

			.content{
				padding: 30px 10px 10px;
				color: white;
				height: 150px;
				background:#0ba1e4;				
			
			}
			.content h3{display: none;}
			.content h1{		
	    		font-size: 30px;	    	
			}			
		}



	</style>
	<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<h4 class="one">响应式应用第三关： <span>内容关</span></h4>
	<div class="content">	 
			<h1>让五四精神在新时代放射新的光芒</h1> 
			<h3>青年兴则国家兴，青年强则国家强</h3> 	
	</div>
</body>
</html>